<script setup>
import { computed, ref, watch } from 'vue'

import { fetchCameraDeviceDetail } from '@/api/manager/dataManage/deviceManage.js'

defineOptions({
  name: 'CameraDetail',
})

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
  parkList: {
    type: Array,
    default: () => [],
  },
})

const contentLoading = ref(false)

const formRef = ref()

const dialogVisible = ref(false)

const currentDetail = ref({})

const fetchDetailData = () => {
  contentLoading.value = true
  fetchCameraDeviceDetail(props.detail.pkid)
    .then((res) => {
      if (res.success) {
        currentDetail.value = res.data
      } else {
        ElMessage.error(res.message || '获取详情失败')
      }
    })
    .catch((err) => {
      ElMessage.error(err)
    })
    .finally(() => {
      contentLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
  currentDetail.value = {}
  formRef.value?.resetFields()
}

const imageUrls = computed(
  () => currentDetail.value.imgList?.map((item) => item.fileUrl) || [],
)

watch(
  () => props.detail,
  (val) => {
    if (val && val.pkid) {
      fetchDetailData()
    }
  },
)

watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      formRef.value?.resetFields()
    }
  },
)

defineExpose({ dialogVisible })
</script>

<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="设备详情"
    width="813px"
    @close="handleClose"
  >
    <div class="custom-detail" v-loading="contentLoading">
      <el-form
        ref="formRef"
        :model="currentDetail"
        label-position="right"
        label-width="110"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称：" prop="nickName">
              <span>{{ currentDetail.nickName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="位置：" prop="position">
              <span>{{ currentDetail.position }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="照片：" prop="imgs">
              <el-space wrap>
                <el-image
                  class="image-item"
                  v-for="(item, index) in currentDetail.imgList || []"
                  :key="item.pkid"
                  fit="cover"
                  :src="item.fileUrl"
                  :preview-src-list="imageUrls"
                  :initial-index="index"
                />
              </el-space>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 100%;
  margin-bottom: 0;

  .image-item {
    width: 100px;
    height: 100px;
  }
}
</style>
